<template>
  <div id="appgo">
    <inputCom @submit="addlist" @searchTxt="searchWay"></inputCom>
    <tablistCom :arr="searchArr" @del="delArr"></tablistCom>
  </div>
</template>

<script>
import inputCom from "./input.vue";
import tablistCom from "./tablist.vue";

export default {
  mounted() {
    this.arr = JSON.parse(localStorage.getItem("arr"))||[]
  },
  data() {
    return {
      arr: [],
      searchText: "",
    };
  },
  methods: {
    addlist(obj) {
      this.arr.push(obj);
      localStorage.setItem('arr',JSON.stringify(this.arr))
    },
    delArr(i) {
      this.arr = this.arr.filter(item => item.id!==i)
      localStorage.setItem('arr',JSON.stringify(this.arr))
    },
    searchWay(item) {
      this.searchText = item;
    },
  },
  computed: {
    searchArr() {
      return this.arr.filter(
        (item) => item.productName.indexOf(this.searchText) !== -1
      );
    },
  },
  components: {
    inputCom,
    tablistCom,
  },
};
</script>







<style>
#appgo {
  width: 600px;
  margin: 10px auto;
}
</style>